<template>
  <div>
    <div class="title">
       <ul @click="isSwitch">
        <li :class="isShow=='dayC'?'active':'' " id="dayC">当日收益
          <div class="xx"></div>
        </li>
        <li :class="isShow=='WeekC'?'active':'' " id="WeekC">当周收益
          <div class="xx"></div>
        </li>
        <li :class="isShow=='monthC'?'active':'' " id="monthC">当月收益
          <div class="xx"></div>
        </li>
      </ul>
    </div>
    <div class="Salesvolume-header">
      <div class="Salesvolume-div">
        <h1>98.85</h1>
        <div>
        <span>2018-12-19</span>
        <img src="../../assets/xiajiantou.png" alt="">
        </div>
      </div>
    </div>
    <div class="Salesvolume-content" >
      <p>当日销售额明细</p>
    </div>
    <div style="overflow: hidden;" v-for="item in items" :key="item" @click="onclick">
      <div class="HotelSales-etailed">
            <div class="HotelSales-etailedLeft">
                <h1 class="HotelSales-etailedLeftH1">订单收益</h1>
                <span class="HotelSales-etailedLeftSpan">2018-12-19</span>
            </div>
            <div class="HotelSales-etailedRight">+56.86</div>
        </div>
        <div class="HotelSales-etailedSolid"></div>
    </div>
  </div>
</template>

<script>
// 钱包当日 周 月 收益
export default {
  name: 'Pursesharing',
  data () {
    return {
      isShow: 'dayC',
      items: ['1', '2', '3', '4']
    }
  },
  methods: {
    isSwitch (e) {
      this.isShow = e.target.id
    },
    onclick () {
      this.$router.push({ name: 'Walletdetails' })
    }
  },
  created: () => {
    document.title = '我的钱包'
  }
}
</script>

<style lang='scss' scoped>
.title {
  height: 13.06vw;
  background: #fff;
  box-shadow:0px 8px 21px 0px rgba(0,0,0,0.06);
  z-index:333;
  ul {
    display: flex;
    justify-content: space-between;
    height: 98%;
    li {
      width: 49%;
      height: 13.06vw;
      text-align: center;
      line-height: 13.06vw;
      font-size: 4.53vw;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(22, 22, 22, 1);
      &.active {
        font-size: 4.53vw;
        font-family: SourceHanSansCN-Bold;
        font-weight: bold;
        color: rgba(22, 22, 22, 1);
        position: relative;
        .xx {
          width: 7.46vw;
          height: 0.8vw;
          background-color: #0a6dff;
          position: absolute;
          bottom: 1.5vw;
          left: 12.3vw;
        }
      }
    }
  }
}
.Salesvolume-header {
  width: 100vw;
  height: 27.4vh;
  background: rgba(255, 255, 255, 1);
}
.Salesvolume-div {
  width: 86.6vw;
  height: 23.67vh;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4vw 8px rgba(0, 0, 0, 0.06);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h1 {
    font-size:11.73vw;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(22,22,22,1);
    margin-bottom:2.99vh;
  }
  span {
    font-size:3.73vw;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(168,168,168,1);
  }
  img{
    width: 2.9vw;
    height: 0.89vh;
  }
}
.Salesvolume-content{
  margin-left: 3.46vw;
  height:5.84vh;
  background:rgba(242,242,242,1);
  p {
    line-height: 5.84vh;
    font-size:3.37vw;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(134,134,134,1);
  }
}
.HotelSales-etailed {
  overflow: hidden;
  width: 100vw;
  height: 11.83vh;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.HotelSales-etailedLeft {
  margin-left: 3.46vw;
}
.HotelSales-etailedLeftH1 {
  font-size: 4.53vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(22, 22, 22, 1);
  margin-bottom: 1.6vw;
}
.HotelSales-etailedLeftSpan {
  font-size: 3.2vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(134, 134, 134, 1);
}
.HotelSales-etailedRight {
  margin-right: 3.46vw;
  font-size: 4.53vw;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(22, 22, 22, 1);
}
.HotelSales-etailedSolid {
  float: right;
  width: 96vw;
  border-top: 1px solid rgba(238, 238, 238, 1);
}
</style>
